<template>
  <!-- 最大盒子 -->
  <s-layout :tabbarshow="false" id="layout" navbar="normal" :title="'发薪记录'" :autoBack="true" leftIconColor="$uni-text-color"
      :bgColor="'#ffffff'" :titleStyle="{ color: '$uni-text-color', fontSize: '32rpx', fontWeight: '600' }">
      <view class="max_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
        <scroll-view v-if="list.length" scroll-y class="comprehensive" @scrolltolower='listScrolltolower'
        show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
        :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
        @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort" @scroll="onScroll"> 
        <view class="list" >
          <view class="item" v-for="item in list" :key="item.id">
              <view class="item_top">
                <image :src="`${baseUrl}/uploads/uniapp_image/staff_v1/faxinjilu_icon_gangwei@2 (1).png`" mode="scaleToFill"/>
                <text>{{ item.schedule.title }}</text>
              </view>
              <view class="item_bottom">
                <view class="item_bottom_content">
                  <text>类型</text>
                  <view class="yellow" v-if="item.event == 'salary'">工资</view>
                  <view class="yellow" v-if="item.event == 'commission'">佣金</view>
                </view>
                <view class="item_bottom_content">
                  <text>金额</text>
                  <view class="red">￥{{ item.money }}</view>
                </view>
                <view class="item_bottom_content">
                  <text>班次地点</text>
                  <view class="black">{{ item.schedule.address }}</view>
                </view>
                <view class="item_bottom_content">
                  <text>班次时间</text>
                  <view class="blue">{{ item.schedule.date }}({{item.schedule.start_time  }} - {{ item.schedule.end_time }})</view>
                </view>
              </view>
          </view>

         </view>
           <!-- 加载中 && 没有更多数据了 -->
            <view>
              <s-loadmore-gather :current_page="listPage" :last_page="listlast_page" ref="loadmoreRef"></s-loadmore-gather>
            </view> 
         </scroll-view>
          <u-empty v-else mode="list"  icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容" marginTop="50%"></u-empty>
      </view>
  </s-layout>
</template>
<script setup>
import { baseUrl } from '@/sheep/config';
import { onLoad, onShow ,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
import { reactive, ref, computed } from "vue";

import sheep from "@/sheep";

const userInfo = computed(() => sheep.$store('user').userInfo);
// 获取系统信息
const { safeAreaInsets } = uni.getSystemInfoSync();

onLoad((option) => {
  getRemitListUser()

});
// 数据
const loadmoreRef = ref()
const listPage = ref()
const listlast_page = ref();
const listpagenumber = ref(1);
const list =ref([])
const getRemitListUser = async () => {
  let params = {
    page: listpagenumber.value
  }
  const res = await sheep.$api.project.getRemitListUser(params)
  list.value = [...list.value, ...res?.data.rows]
  listPage.value = res.data.current_page
  listlast_page.value = res.data.last_page
}

// 触底刷新
// 加载更多


//滚动触底
const listScrolltolower = () => {
  loadmoreRef.value.PopupScrolltolower()
  if (listPage.value < listlast_page.value) {
    listpagenumber.value += 1 ;
  } else {
    return;
  }
  getRemitListUser();
};
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
  if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
  triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
  if (freshing.value) return;
  freshing.value = true;
  setTimeout(() => {
    listpagenumber.value = 1;
    list.value = []
    triggered.value = false;
    freshing.value = false;
    getRemitListUser();
  }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
  triggered.value = 'restore'; // 需要重置
  // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
  // console.log("onAbort");
}
</script>

<style lang="scss" scoped>
.max_box{
  width: calc(100% - 40rpx);
  margin: 20rpx auto;
  .list{
    .item{
      padding: 20rpx 30rpx;
      height: auto;
      border-radius: 16rpx;
      background-color: #FFFFFF;
      margin-bottom: 20rpx;
      box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.05);
      .item_top{
        height: 70rpx;
        display: flex;
        align-items: center;
        image{
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        text{
          color: #333333;
          font-weight: 600;
          font-size: 30rpx;
        }
      }
      .item_bottom{
        .item_bottom_content{
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 60rpx;
          text{
            color: #999999;
            font-weight: 500;
            font-size: 26rpx;
          }
          view{
            text-align: right;
            font-weight: 500;
            font-size: 26rpx;
            width: 520rpx;
          }
          .yellow{
            color: #FF8F00; 
          }
          .red{
            color: #FF0000; 
          }
          .black{
            color: #333333; 
            display: -webkit-box; /* 显示多行文本容器 */
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; /*显示行数*/
        overflow: hidden; /*隐藏多出部分文字*/
        text-overflow: ellipsis; /*用省略号代替多出部分文字*/

          }
          .blue{
            color: #0038F7; 
          }
        }
      }
    }
  }
}
.comprehensive {
  height: 87vh;
}
</style>